<template>
    <view class="Wrapper">
        <titleBox title="服务内容"></titleBox>
        <view class="Server">
            <image :src="headImg" mode="aspectFill" class="Product_Img"></image>
            <view class="Server-Content">
                <view class="d-flex f-column">
                    <text class="ellipsis black size30">商品或服务名1商品或服务名1商品或服务名1</text>
                    <text class="ellipsis color_33 h6 m-top10"
                        >摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</text
                    >
                </view>
                <view class="row j-sb a-center">
                    <text class="price size32">￥399.99</text>
                    <text class="num size28">x 1</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import titleBox from '@/components/subCard/titleBox.vue'
    export default {
        components: { titleBox },
        data() {
            return {
                headImg: 'https://msraimgcdn.mogoie.com/6099/1709797684310.JPG',
            }
        },
        methods: {},
    }
</script>

<style lang="scss" scoped>
    .Wrapper {
        width: 690rpx;
        margin: 24rpx auto 0;
        background-color: #ffffff;
        border-radius: 10rpx;
        padding: 20rpx 30rpx 40rpx 20rpx;
        .Server {
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: 20rpx;
            .Product_Img {
                width: 150rpx;
                height: 150rpx;
                border-radius: 10rpx;
                margin-right: 20rpx;
            }
            &-Content {
                flex: 1;
                height: 150rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                overflow: hidden;
                .price,
                .num {
                    color: #991829;
                }
            }
        }
    }
</style>
